<template>
	<view class="authoriztion-containtor">
		<contont-nav-bar />
		<view class="authoriztion-contont">
			<view class="authoriztion-center">
				<view class="authoriztion-top">
					<authoriztion-title @onFoldState="onFoldState" :isShowAn="isShowAn" />
					<view class="nav" :class="{'hei':isShowAn}">
						<authoriztion-list :lists="hostAuthorion" />
					</view>
				</view>
				<view class="authoriztion-bottom">
					<group-list :isEdit="false" :isShowAdd="false" :minorList="minorList" @onShowAuth="onShowAuth" :isBottom="isBottom" :current="current"/>
					<view v-if="isAuth" class="authClass">
						<view class="authImage" :style="{'top':(offsetTop-268)+'px','left':(offsetLeft+92)+'px'}">
							<image class="bgb" v-if="title == '综合柜'" src="/static/images/authoriztion/stateImg_zh.png" alt="" mode="widthFix" />
							<image class="bgb" v-else-if="title == '层架柜'" src="/static/images/authoriztion/stateImg_cj.png" alt="" mode="widthFix" />
							<image class="bgb" v-else="title == '挂架柜'" src="/static/images/authoriztion/stateImg_gj.png" alt="" mode="widthFix" />
							<view class="authPerson" :style="{'left':(-offsetLeft-75)+'px'}">
								<authoriztion-list :lists="hostAuthorion" :isbackground="true"/>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="authoriztion-tabbar">
				<authoriztion-tar />
			</view>
		</view>
	</view>
</template>

<script>
	import { getAuthorize } from '../../utils/api.js'
	import AuthoriztionList from '../../components/authoriztion/authoriztion-list.vue'
	import AuthoriztionTitle from '../../components/authoriztion/authoriztion-title.vue'
	import GroupList from "../../components/group/group-list.vue"
	import AuthoriztionTar from '../../components/authoriztion/authoriztion-tar.vue'
	import ContontNavBar from '../../components/common/contont-nav-bar.vue'

	export default {
		components: {
			ContontNavBar,
			AuthoriztionTar,
			GroupList,
			AuthoriztionTitle,
			AuthoriztionList
		},
		data() {
			return {
				minorList:[],
				hostAuthorion: [],
				addPopupType: false,
				minorAddPopupType: false,
				isShowAn: true,
				isBottom: false,
				current: -1,
				current2: -1,
				isAuth:false,
				title:'',
				offsetTop:0,
				offsetLeft:0,
				list:[
					{
						userName: 'xxxxxx',
						phonenumber: '12345678910'
					},
					{
						userName: 'xxxxxx',
						phonenumber: '12345678910'
					},
					{
						userName: 'xxxxxx',
						phonenumber: '12345678910'
					},
					{
						userName: 'xxxxxx',
						phonenumber: '12345678910'
					},
					{
						userName: 'xxxxxx',
						phonenumber: '12345678910'
					},
					{
						userName: 'xxxxxx',
						phonenumber: '12345678910'
					},
					{
						userName: 'xxxxxx',
						phonenumber: '12345678910'
					},
					{
						userName: 'xxxxxx',
						phonenumber: '12345678910'
					},
					{
						userName: 'xxxxxx',
						phonenumber: '12345678910'
					}
				]
			}
		},
		onLoad() {
			this.loadAuthorize() //获取授权人员
		},
		methods: {
			 loadAuthorize() {
				let tokenData = uni.getStorageSync('lastToken');
				this.minorList = this.$store.state.mainCabinet.minorList
				getAuthorize({terminalId:tokenData.terminalId}).then(res=>{
					this.hostAuthorion = res.data
					console.log('授权人员',data);
					console.log(this.hostAuthorion);
				})
			},
			onFoldState() {
				this.isShowAn = !this.isShowAn;	
			},
			minorOnNewPer() {
				this.$refs['popup-minornew'].open()
			},	
			minorOnRemove() {
				this.$refs['popup-minorremove'].open()
			},
			onShowAuth(data){
				if(this.current2==data[1]){
					if(this.isAuth){
						this.isAuth = false
						this.current = -1
					}else{
						this.isAuth = true
						this.current = data[1]
					}
				}else{
					if(this.isAuth){
						if(data[1]>=5){
							this.offsetTop = data[2].currentTarget.offsetTop-137
						}else{
							this.offsetTop = data[2].currentTarget.offsetTop
						}
					}else{
						this.offsetTop = data[2].currentTarget.offsetTop
					}
					this.isAuth = true
					this.current2 = data[1]
					this.current = data[1]
				}
				this.title = data[0].title
				this.offsetLeft = data[2].currentTarget.offsetLeft
			}

		}
	}
</script>

<style scoped lang="less">
.authImage{
	position: relative;
	.bgb{
		// width: 114rpx;
		// height: 40rpx;
		width: 3.959vw;
		height: 2.616vh;;
	}
}
.authPerson{
	position: absolute;
	// width: 2730rpx;
	width: 94.8vw;
	background: #E8F2FF;
	overflow: auto;
	box-sizing: border-box;
	padding: 20rpx 24rpx 0 24rpx;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.hei{
	// height: 128rpx !important;
	height: 8.367vh !important;
	overflow: hidden;
}
.authoriztion-containtor{
	height: 100vh;
	background: #FFFFFF;
}	
.authoriztion-contont{
	// margin: 38rpx 36rpx 32rpx 32rpx;
	margin: 2.4vh 36rpx 3.15vh 32rpx;
	box-sizing: border-box;
	// width: 2802rpx;
	// height: 1304rpx;
	width: 97.5vw;
	height: 85vh;
	border-radius: 32rpx;
	border: 2rpx solid #4F9AFF;
	box-shadow: 0px 2px 5px 0px rgba(3, 28, 62, 0.24);
	position: relative;
}
.authoriztion-center{
	width: 100%;
	// height: 1162rpx;
	height: 75.75vh;
	overflow: auto;
}
.authoriztion-top{
	width: 100%;
	border-bottom: 2rpx solid #4F9AFF;
	padding: 0 56rpx;
	box-sizing: border-box;
}
.nav{
	width: 100%;
	box-sizing: border-box;
	padding: 18rpx 0 0 0;
}
.authoriztion-bottom{
	width: 100%;
	box-sizing: border-box;
	overflow-x:hidden;
	overflow-y: scroll;
	// height: 924rpx;
	height: 60.4vh;
}
.authoriztion-tabbar{
	padding: 0 64rpx;
	box-sizing: border-box;
	position: absolute;
	right: 0;
	left: 0;
	bottom: 0;
	// height: 138rpx;
	height: 9vh;
	background: #4F9AFF;
	border-radius: 0px 0px 10px 10px;
}	

</style>
